<template>
    <div
        ref="node"
        :style="nodeContainerStyle"
        @click="clickNode"
        @mouseup="changeNodeSite"
        :class="nodeContainerClass"
    >
        <!-- 节点图标 -->
        <div style="max-height:88px;text-align: center;" class="flow-node-drag" >
            <img src="./image/room.png" style="width:72px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'room'" />
            <img src="./image/cabinet.png" style="width:48px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'cabinet'"/>
            <img src="./image/phy_machine.png" style="width:48px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'host' || node.nodeType == 'physical'"/>
            <img src="./image/system.png" style="width:88px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'sys'"/>
            <img src="./image/vm.png" style="width:64px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'virtual'"/>
            <img src="./image/db.png" style="width:64px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'database'"/>
            <img src="./image/docker.png" style="width:64px;margin:0 auto" :class="nodeIcoClass" v-if="node.nodeType == 'docker'"/>
        </div>
        <!-- 节点名称 -->
        <div class="ef-node-text" :show-overflow-tooltip="true">
            {{node.nodeName || '未定义'}}
        </div>
    </div>
</template>
<script type="text/javascript">
/*
* @author 宋辉辉
* @description 拓扑图的节点组件
* @api 无
* @since 2021年11月11日10:57:59
* @update 2021年11月11日10:58:01
* @modifier 修改人
* @bug 无
* @version v1.0.0
*/

export default {
   props: {
        node: Object,
        activeElement: Object
    },
    data() {
        return {}
    },
    computed: {
        nodeContainerClass() {
            return {
                'ef-node-container': true,
                'ef-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.code : false
            }
        },
        // 节点容器样式
        nodeContainerStyle() {
            return {
                top: this.node.top,
                left: this.node.left
            }
        },
        nodeIcoClass() {
            var nodeIcoClass = {}
            // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
            nodeIcoClass['flow-node-drag'] = this.node.viewOnly ? false : true
            return nodeIcoClass
        }
    },
    methods: {
        // 点击节点
        clickNode() {
            
            this.$emit('clickNode', this.node.code)
        },
        // 鼠标移动后抬起
        changeNodeSite() {
            // 避免抖动
            if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
                return;
            }
            this.$emit('changeNodeSite', {
                nodeId: this.node.code,
                left: this.$refs.node.style.left,
                top: this.$refs.node.style.top,
            })
        }
    }
}
</script>

<style>
/*节点的最外层容器*/
.ef-node-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 88px;
    border-radius: 5px;
    border:1px solid transparent;
}
.ef-node-container:hover {
    /* 设置移动样式*/
    cursor: move;
    background-color: #F0F7FF;
    /*box-shadow: #1879FF 0px 0px 12px 0px;*/
    background-color: #F0F7FF;
    border: 1px dashed #00A1D8;
}

/*节点激活样式*/
.ef-node-active {
    background-color: #F0F7FF;
    /*box-shadow: #1879FF 0px 0px 12px 0px;*/
    background-color: #F0F7FF;
    border: 1px solid #1879FF;
}

/*节点左侧的竖线*/
.ef-node-left {
    width: 4px;
    background-color: #1879FF;
    border-radius: 4px 0 0 4px;
}

/*节点左侧的图标*/
.ef-node-left-ico {
    line-height: 32px;
    margin-left: 8px;
}

.ef-node-left-ico:hover {
    /* 设置拖拽的样式 */
    cursor: crosshair;
}

/*节点显示的文字*/
.ef-node-text {
    color: #565758;
    font-size: 12px;
    width: 88px;
    /* 设置超出宽度文本显示方式*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/*节点右侧的图标*/
.ef-node-right-ico {
    line-height: 32px;
    position: absolute;
    right: 5px;
    color: #84CF65;
    cursor: default;
}

/*节点的几种状态样式*/
.el-node-state-success {
    line-height: 32px;
    position: absolute;
    right: 5px;
    color: #84CF65;
    cursor: default;
}

.el-node-state-error {
    line-height: 32px;
    position: absolute;
    right: 5px;
    color: #F56C6C;
    cursor: default;
}

.el-node-state-warning {
    line-height: 32px;
    position: absolute;
    right: 5px;
    color: #E6A23C;
    cursor: default;
}

.el-node-state-running {
    line-height: 32px;
    position: absolute;
    right: 5px;
    color: #84CF65;
    cursor: default;
}
</style>